<template>
	<view>
		<image src="/static/images/login/background.png"></image>
		<userLogin  @isshow="isshow" v-if="token"></userLogin>
		<view class="Login-mian" v-else>
			<view class="Login-box">
				<h3><text>登录</text></h3>
				<view>
					<image src="/static/images/login/_icon.png"></image>
					<input
						placeholder="请输入账号/手机号码"
						placeholder-style="font-size:16rpx;color:#ACACAC"
					/>
					<image src="/static/images/login/xh_icon2.png"></image>
				</view>
				<view>
					<image src="/static/images/login/_icon4.png"></image>
					<input
						placeholder="请输入密码"
						placeholder-style="font-size:16rpx;color:#ACACAC"
					/>
					<image src="/static/images/login/xs_icon4.png"></image>
				</view>
				<view @tap="submit">登录</view>
			</view>
			<view class="Login-bottm">
				<text>还没有账号?</text>
				<text @tap="token =!token">注册</text>
			</view>
		</view>
	
	</view>
	</view>
</template>

<script>
import userLogin from '@/components/userLogin/userLogin.vue';
export default {
	components: {
		userLogin
	},
	data() {
		return {
			token: true,
		};
	},
	methods: {
		isshow(e){
			this.token = e
		},
		submit(){
			uni.switchTab({
				url:'/pages/me/me'
			})
		}

	}
};
</script>

<style lang="scss" scoped>
image {
	width: 100%;
	height: 20vh;
}
.Login-mian {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.Login-box {
		width: 80vw;
		h3 {
			margin: 5vh 0;
			text {
				padding: 1rpx 0;
				border: 4px solid #ddd;
				border-image: -webkit-linear-gradient(
						to right,
						#3388ee,
						#4db9f1
					)
					0 0 30 0;
				border-image: -moz-linear-gradient(to right, #3388ee, #4db9f1)
					0 0 30 0;
				border-image: linear-gradient(to right, #3388ee, #4db9f1) 0 0
					30 0;
			}
		}
		view {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			background-color: #f5f5f5;
			border-radius: 90rpx;
			padding: 0 20rpx;
			input {
				flex: 1;
				color: rgb(187, 187, 187);
				font-size: 28rpx;
				padding: 20rpx 10rpx;
			}
			image {
				width: 32rpx;
				height: 32rpx;
			}
			&:last-child {
				padding: 20rpx 10rpx;
				display: flex;
				justify-content: center;
				font-size: 30rpx;
				color: #d3e9fb;
				background: linear-gradient(to right, #3388ee, #4db9f1);
			}
		} //view
	} //box
	.Login-bottm {
		margin-top: 20rpx;
		font-size: 12rpx;
		text:first-child {
			color: #b8b8b8;
		}
		text:last-child {
			color: #83b3f5;
			padding: 0 10rpx;
		}
	}
} //mian
</style>
